<template>
  <!-- 支付组件 -->
  <view class="my-pay-container">
    <!-- 已选 -->
    <text class="pay-tip">已选{{category_count}}类{{total}}个</text>
    <!-- 合计 -->
    <view class="amount-box">
      合计：<text class="amount">￥{{total_price}}</text>
    </view>
    <!-- 结算按钮 -->
    <view class="btn-pay" @click="pay">支付</view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  export default {
    name: "my-pay",
    // 接收父组件传递过来的待支付商品数据
    props: {
      goods: {
        type: Array,
        default: []
      },
    },
    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('m_user', ['updateOrder']),
      pay() {
        if (!this.addressStr) return uni.$showMsg('请选择收货地址！')
        uni.showModal({
          title: '提示',
          content: '确认支付吗？',
          success: async (res) => {
            if (res.confirm) {
              // 整理支付参数
              const order = {
                pay: true, //是否已支付
                category_count: this.category_count, //商品种类
                goods_count: this.total, //商品总数
                price: this.total_price, // 订单总价格
                goods: this.goods, // 商品数组
                user_id: this.userInfo.user_id, //该用户的账号
                username: this.userInfo.username, //用户名
                consignee: this.address.userName, //收货人
                phone_number: this.address.telNumber, //收货人电话
                address: this.addressStr //收货地址
              }
              const { data: res1 } = await uni.$http.post('/api/public/v1/my/orders/pay', order)
              if (res1.meta.status !== 200 && res1.meta.status !== 201) return uni.$showMsg('支付失败！')
              uni.showToast({
                icon: 'success',
                title: '支付成功'
              })
              // 将订单信息保存到vuex仓库及本地
              this.updateOrder(res1.message.order)
              // 跳转到待发货页面
              setTimeout(() => {
                uni.navigateTo({
                  url: '/subpkg/order/order?index=2'
                })
              }, 1500)
            } else if (res.cancel) {
              const order = {
                pay: false, //是否已支付
                category_count: this.category_count, //商品种类
                goods_count: this.total, //商品总数
                price: this.total_price, // 订单总价格
                goods: this.goods, // 商品数组
                user_id: this.userInfo.user_id, //该用户的账号
                username: this.userInfo.username, //用户名
                consignee: this.address.userName, //收货人
                phone_number: this.address.telNumber, //收货人电话
                address: this.addressStr //收货地址
              }
              const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/pay', order)
              if (res2.meta.status === 201) uni.$showMsg('用户取消了支付！') //创建订单成功（待支付）
              this.updateOrder(res2.message.order)
              // 跳转到待支付订单页面
              setTimeout(() => {
                uni.navigateTo({
                  url: '/subpkg/order/order?index=1'
                })
              }, 1500)
            }
          },
          fail: (err) => uni.$showMsg('支付失败！')
        })
      }
    },
    computed: {
      ...mapState('m_user', ['token', 'address', 'userInfo']),
      ...mapGetters('m_user', ['addressStr']),
      // 计算商品种类
      category_count() {
        return this.goods.length
      },
      // 计算商品个数
      total() {
        return this.goods.reduce((total, current) => total += current.goods_count, 0)
      },
      // 计算待支付商品总价格
      total_price() {
        return this.goods.reduce((total, current) => total += current.goods_count * current.goods_price, 0).toFixed(2)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-pay-container {
    width: 100%;
    height: 50px;
    background-color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    font-size: 14px;
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;

    .amount-box {
      .amount {
        color: #C00000;
        font-weight: bold;
      }
    }

    .btn-pay {
      background-color: #C00000;
      color: white;
      line-height: 50px;
      min-width: 100px;
      text-align: center;
      padding: 0 10px;
    }
  }
</style>
